<template>
  <div class="device">
    <div class="tab_control_box">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="人员统计" name="1">
          <StaffStatistics ref="StaffStatisticsRef" v-if="activeName == 1" />
        </el-tab-pane>
        <el-tab-pane label="出入记录" name="2">
          <InAndOut ref="InAndOut" v-if="activeName == 2"></InAndOut>
        </el-tab-pane>
        <el-tab-pane label="人员定位" name="3">
          <StaffLocation ref="StaffLocation"></StaffLocation>
        </el-tab-pane>
        <el-tab-pane label="实时轨迹" name="4">
          <StaffTrack ref="StaffTrack"></StaffTrack>
        </el-tab-pane>
      </el-tabs>

      <div class="button_box">
        <el-row class="flex">
          <div class="time-picker" v-show="activeName == 1">
            <span>标段</span>
            <el-select
              class="input-width"
              size="mini"
              v-model="bidSection"
              clearable
              placeholder="请选择"
              @change="getWorkAreaList">
              <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>

            <span>所属工区</span>
            <el-select
              class="input-width"
              size="mini"
              v-model="areaId"
              clearable
              placeholder="请选择"
              @change="getWorkAreaList">
              <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>

            <span>日期</span>
            <el-date-picker
              v-model="timeInfo"
              type="date"
              class="input-width"
              size="mini"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
              @change="changeTimeInfo" />
          </div>
          <el-button type="text" plain icon="el-icon-refresh" @click="refreshListData">刷新</el-button>
          <el-button type="text" plain icon="el-icon-upload2" v-show="activeName == 2">导出</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import StaffStatistics from "./oversee/StaffStatistics";
import InAndOut from "./oversee/InAndOut";
import StaffLocation from "./oversee/StaffLocation";
import StaffTrack from "./oversee/StaffTrack";
import HttpInterface from "../../util/httpInterface";
import PublicMethods from "../../util/PublicMethods";
import { mapState, mapActions } from "vuex";

export default {
  name: "Oversee",
  components: {
    StaffStatistics, InAndOut, StaffLocation, StaffTrack
  },
  data() {
    return {
      activeName: "1",
      timeInfo: "",
      toDayTime: "",
      bidSection: "",
      areaId: "",
      flag: null,
      workAreaInfo: []
    };
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  created() {
    let timestamp = Date.now();
    let toDayTime = PublicMethods.formatDate(timestamp, 'yyyy-mm-dd');
    this.toDayTime = toDayTime;
    this.timeInfo = toDayTime;
    HttpInterface.getUserInfo(() => {
      this.timingGetData();
      this.getTendersInfo();
      this.getDutymanageList();
      this.refreshListData();
    })
  },

  beforeDestroy() {
    this.flag = null;
  },

  methods: {
    ...mapActions(["getTendersInfo", "getDutymanageList", "selectByBidSection"]),

    timingGetData() {
      let _this = this;
      if (this.activeName == 1) {
        if (this.timeInfo === this.toDayTime) {
          this.dataInfo = {
            time: this.timeInfo,
            bidSection: this.bidSection,
            areaId: this.areaId
          };
          this.flag = setInterval(() => {
            let refs = _this.$refs.StaffStatisticsRef;
            refs && refs.getStatisticsData(this.dataInfo);
            refs && refs.getInAndOutList(this.dataInfo);
          }, 5000);
        }
      } else {
        this.flag = null;
      }
    },

    handleClick() {
      this.refreshListData();
    },

    changeTimeInfo() {
      this.refreshListData();
    },

    getWorkAreaList() {
      this.dataInfo = {
        time: this.timeInfo,
        bidSection: this.bidSection,
        areaId: this.areaId
      };
      let _this = this;
      this.selectByBidSection({
        bidSection: this.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
          _this.refreshListData();
        }
      })
    },

    // 刷新数据
    refreshListData () {
      switch (this.activeName) {
        case "1":
          this.$nextTick(() => {
            this.$refs.StaffStatisticsRef.getStatisticsData(this.dataInfo);
            this.$refs.StaffStatisticsRef.getInAndOutList(this.dataInfo);
          })
          break;
        case "2":
          this.$nextTick(() => {
            this.$refs.InAndOut.getInAndOutList();
          })
          break;
        case "3":
          this.$refs.StaffLocation.ready();
          break;
        case "4":
          this.$refs.StaffTrack.ready();
          break;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  .time-picker{
    display: flex;
    justify-content: space-between;
    align-items: center;

    span{
      font-size: 14px;
      color: #828282;
      margin-right: 8px;
    }

    .input-width{
      width: 130px;
      margin-right: 20px;
    }
  }
</style>
